<template>
  <view>
    <!-- 自定义导航 -->
    <view class="search-box">
      <my-search @click="gotoSearch"></my-search>
    </view>
    <view class="scroll-view-container">
      <!-- 左侧导航 -->
      <scroll-view class="left-scroll-view" :scroll-top="leftScrollTop" scroll-y="true" :style="{ height: wh + 'px' }">
        <block v-for="(item, index) in cateList" :key="index">
          <!-- 左侧一级分类 -->
          <view class="left-scroll-view-item" :class="{ actived: activedInd === index }" @click="activedChange(item, index)">{{ item.cat_name }}</view>
        </block>
        <view class="left-scroll-view-item" :class="{ actived: activedInd === index }" @click="activedInd = index">
          <text>{{ item.cat_name }}</text>
        </view>
      </scroll-view>
      <!-- 右侧分类列表 -->
      <scroll-view v-if="currCate && currCate.children" :scroll-top="rightScrollTop" class="right-scroll-view" scroll-y="true" :style="{ height: wh + 'px' }">
        <block v-for="(child, index) in currCate.children" :key="child.cat_id">
          <!-- 右侧二级分类 -->
          <view class="cate-lv2">
            <!-- 二级分类标题 -->
            <view class="cate-lv2-title">/ {{ child.cat_name }} /</view>
            <!-- 二级分类列表 -->
            <view class="cate-lv3-list">
              <!-- 由于推荐一级分类冲锋衣没有 children 所以用条件渲染区分 -->
              <template v-if="child.children">
                <!-- 二级分类项 -->
                <view class="cate-lv3-item" v-for="(item, index) in child.children" :key="item.cat_id" @click="gotoGoodsList(item)">
                  <image :src="item.cat_icon" mode="widthFix"></image>
                  <text>{{ item.cat_name }}</text>
                </view>
              </template>
              <template v-else>
                <view class="cate-lv3-item" @click="gotoGoodsList(child)">
                  <image :src="child.cat_icon" mode="widthFix"></image>
                  <text>{{ child.cat_name }}</text>
                </view>
              </template>
            </view>
          </view>
        </block>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import badgeMix from '@/mixins/tabbar-badge.js'
export default {
  mixins: [badgeMix],
  data() {
    return {
      wh: 0,
      activedInd: 0, // 激活时的下标
      cateList: [], // 分类列表
      rightScrollTop: 0 ,// 右侧滚动条距离顶部的距离
      leftScrollTop: 0, // 左侧滚动条距离顶部的距离
    };
  },
  onLoad() {
    // getSystemInfoSync返回一个系统信息对象
    const sysInfo = uni.getSystemInfoSync();
    // console.log(sysInfo);
    // 可用高度 = windowHeight可使用窗体高度 - my-search高度50
    this.wh = sysInfo.windowHeight - 50;
    this.getCateList();
  },
  onHide() {
    this.activedInd = 0;
    this.leftScrollTop = this.leftScrollTop === 0 ? 1 : 0;
    this.rightScrollTop = this.rightScrollTop === 0 ? 1 : 0;
    // this.activedChange(null, 0)
  },
  computed: {
    // 导航激活时的分类
    currCate() {
      return this.cateList[this.activedInd];
    }
  },
  methods: {
    async getCateList() {
      const { data: res } = await uni.$http.get('/categories');
      // console.log(res);  
      if (res.meta.status !== 200) {
        //请求失败时
        return uni.$showMsg();
      }
      this.cateList = res.message; // 数据请求成功
    },
    // 激活一级分类导航 回调函数
    activedChange(item, index) {
      this.activedInd = index;
      // 当激活不同一级分类导航时要重置滚动条的位置
      // 由于只有重置的值与之前的值不一样才能重置
      // 所以让scrollTop 在 0 和 1 之间切换
      this.rightScrollTop = this.rightScrollTop === 0 ? 1 : 0;
    },
    // 跳转到商品链接
    gotoGoodsList(item) {
      console.log(item);
      uni.navigateTo({
        url: `/subpkg/goods_list/goods_list?cid=${item.cat_id}`
      });
    },
    gotoSearch(){
      uni.navigateTo({
        url: '/subpkg/search/search'
      })
    }
  }
};
</script>

<style lang="scss">
.scroll-view-container {
  background-color: #ffffff;
  display: flex;
  .left-scroll-view {
    // display: flex;
    width: 120px;
    .left-scroll-view-item {
      // width: 120px;
      background-color: #f7f7f7;
      text-align: center;
      line-height: 60px;
      font-size: 12px;
      &.actived {
        background-color: #ffffff;
        position: relative;
        &::before {
          content: ' ';
          display: block;
          background-color: #c00000;
          width: 3px;
          height: 30px;
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }
  }
  .right-scroll-view {
    .cate-lv2 {
      .cate-lv2-title {
        font-size: 12px;
        font-weight: bold;
        text-align: center;
        padding: 15px 0;
      }
      .cate-lv3-list {
        display: flex;
        flex-wrap: wrap;
        .cate-lv3-item {
          width: 33.3%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          font-size: 12px;
          align-items: center;
          margin-bottom: 10px;
          image {
            width: 60px;
            height: 60px;
          }
        }
      }
    }
  }
}
</style>
